<style>


</style>
<template>
    <ly-page>
        <ly-navi type="back" title="详情实例"></ly-navi>
        <ly-page-content style="min-height: 100px;">
            <ly-form-view title="默认类型">
                <ly-form-line>
                    <ly-info label="订单金额">10000</ly-info>
                    <ly-info label="订单金额">10000</ly-info>
                </ly-form-line>
                <ly-form-line>
                    <ly-info label="订单金额">10000</ly-info>
                    <ly-info label="已付款">10000</ly-info>
                </ly-form-line>
                <ly-form-line>
                    <ly-info label="未付款">0</ly-info>
                    <ly-info label="付款日期">2019-11-09</ly-info>
                </ly-form-line>
                <ly-info label="协议生效日期">2019-11-09</ly-info>

            </ly-form-view>
            <ly-code-view>
                    <pre v-pre>
<ly-form-view title="默认类型">
    <ly-form-line>
        <ly-info label="订单金额">10000</ly-info>
        <ly-info label="订单金额">10000</ly-info>
    </ly-form-line>
    <ly-form-line>
        <ly-info label="订单金额">10000</ly-info>
        <ly-info label="已付款">10000</ly-info>
    </ly-form-line>
    <ly-form-line>
        <ly-info label="未付款">0</ly-info>
        <ly-info label="付款日期">2019-11-09</ly-info>
    </ly-form-line>
    <ly-info label="协议生效日期">2019-11-09</ly-info>
</ly-form-view>

                    </pre>
            </ly-code-view>
            <hr/>
            <ly-form-view title="紧凑类型" tight>
                <ly-info style="font-weight: bold">李宝宝</ly-info>
                <ly-info label="学员生日">李宝宝</ly-info>
                <ly-info label="学员年龄">李宝宝</ly-info>
            </ly-form-view>
            <ly-code-view>
                    <pre v-pre>
<ly-form-view title="紧凑类型" tight>
    <ly-info style="font-weight: bold">李宝宝</ly-info>
    <ly-info label="学员生日">李宝宝</ly-info>
    <ly-info label="学员年龄">李宝宝</ly-info>
</ly-form-view>
                    </pre>
            </ly-code-view>
        </ly-page-content>

        <ly-page-box>
            <ly-page-box-left>
                <ly-panel>
                    <ly-panel-content style="padding-bottom: 80px;">
                        <el-button size="small" type="primary" style="float: right">编辑</el-button>

                        <ly-form-view title="协议编号" tight>
                            <p>9888888888888</p>
                        </ly-form-view>
                        <hr/>
                        <ly-form-view title="学员概览" tight>
                            <ly-info style="font-weight: bold">李宝宝</ly-info>
                            <ly-info label="学员生日">李宝宝</ly-info>
                            <ly-info label="学员年龄">李宝宝</ly-info>
                        </ly-form-view>
                        <hr/>
                        <ly-form-view>
                            <ly-form-line>
                                <ly-info label="订单金额">10000</ly-info>
                                <ly-info label="订单金额">10000</ly-info>
                            </ly-form-line>
                            <ly-form-line>
                                <ly-info label="订单金额">10000</ly-info>
                                <ly-info label="已付款">10000</ly-info>
                            </ly-form-line>
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                            <ly-info label="协议生效日期">2019-11-09</ly-info>

                        </ly-form-view>

                    </ly-panel-content>

                </ly-panel>
            </ly-page-box-left>
            <ly-page-box-content>
                <ly-panel>
                    <ly-panel-header title="待办事项" border>
                        <el-button type="primary" size="mini"> 更待信息</el-button>
                    </ly-panel-header>
                    <ly-panel-content>
                        <ly-form-view>
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                        </ly-form-view>
                        <ly-form-view title="分组">
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                        </ly-form-view>
                    </ly-panel-content>
                </ly-panel>
                <ly-panel>
                    <ly-panel-header title="待办事项" border>

                        <el-button type="primary" size="mini"> 修改余额</el-button>
                        <el-button type="danger" size="mini"> 冻结账户</el-button>
                    </ly-panel-header>
                    <ly-panel-content>
                        <ly-form-view vertical bold>
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                            <ly-form-line>
                                <ly-info label="未付款">0</ly-info>
                                <ly-info label="付款日期">2019-11-09</ly-info>
                            </ly-form-line>
                        </ly-form-view>
                    </ly-panel-content>
                </ly-panel>
                <ly-panel>
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="用户管理" name="first"></el-tab-pane>
                        <el-tab-pane label="配置管理" name="second"></el-tab-pane>
                        <el-tab-pane label="角色管理" name="third"></el-tab-pane>
                        <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
                    </el-tabs>
                    <ly-panel-content>
                        <ly-form-view>
                            <ly-info label="未付款">0</ly-info>
                            <ly-info label="付款日期">2019-11-09</ly-info>
                            <ly-info label="未付款">0</ly-info>
                            <ly-info label="付款日期">2019-11-09</ly-info>
                        </ly-form-view>
                    </ly-panel-content>
                </ly-panel>

            </ly-page-box-content>

        </ly-page-box>
        <ly-page-content>
            <el-divider content-position="left">左边面板代码</el-divider>
            <ly-code-view>
                    <pre v-pre>
 <ly-panel>
    <ly-panel-content style="padding-bottom: 80px;">
        <el-button size="small" type="primary" style="float: right">编辑</el-button>

        <ly-form-view title="协议编号" tight>
            <p>9888888888888</p>
        </ly-form-view>
        <hr/>
        <ly-form-view title="学员概览" tight>
            <ly-info style="font-weight: bold">李宝宝</ly-info>
            <ly-info label="学员生日">李宝宝</ly-info>
            <ly-info label="学员年龄">李宝宝</ly-info>
        </ly-form-view>
        <hr/>
        <ly-form-view>
            <ly-form-line>
                <ly-info label="订单金额">10000</ly-info>
                <ly-info label="订单金额">10000</ly-info>
            </ly-form-line>
            <ly-form-line>
                <ly-info label="订单金额">10000</ly-info>
                <ly-info label="已付款">10000</ly-info>
            </ly-form-line>
            <ly-form-line>
                <ly-info label="未付款">0</ly-info>
                <ly-info label="付款日期">2019-11-09</ly-info>
            </ly-form-line>
            <ly-info label="协议生效日期">2019-11-09</ly-info>

        </ly-form-view>

    </ly-panel-content>
 </ly-panel>

                    </pre>
            </ly-code-view>
            <el-divider content-position="left">右面面板-1-代码</el-divider>
            <ly-code-view>
                    <pre v-pre>

            <ly-panel>
                <ly-panel-header title="待办事项" border>
                    <el-button type="primary" size="mini"> 更待信息</el-button>
                </ly-panel-header>
                <ly-panel-content>
                    <ly-form-view>
                        <ly-form-line>
                            <ly-info label="未付款">0</ly-info>
                            <ly-info label="付款日期">2019-11-09</ly-info>
                        </ly-form-line>
                        <ly-form-line>
                            <ly-info label="未付款">0</ly-info>
                            <ly-info label="付款日期">2019-11-09</ly-info>
                        </ly-form-line>
                        <ly-form-line>
                            <ly-info label="未付款">0</ly-info>
                            <ly-info label="付款日期">2019-11-09</ly-info>
                        </ly-form-line>
                    </ly-form-view>
                    <ly-form-view title="分组">
                        <ly-form-line>
                            <ly-info label="未付款">0</ly-info>
                            <ly-info label="付款日期">2019-11-09</ly-info>
                        </ly-form-line>
                        <ly-form-line>
                            <ly-info label="未付款">0</ly-info>
                            <ly-info label="付款日期">2019-11-09</ly-info>
                        </ly-form-line>
                        <ly-form-line>
                            <ly-info label="未付款">0</ly-info>
                            <ly-info label="付款日期">2019-11-09</ly-info>
                        </ly-form-line>
                    </ly-form-view>
                </ly-panel-content>
            </ly-panel>
</pre>
            </ly-code-view>
            <el-divider content-position="left">右面面板-2-代码</el-divider>
            <ly-code-view>
                    <pre v-pre>
<ly-panel>
    <ly-panel-header title="待办事项" border>

        <el-button type="primary" size="mini"> 修改余额</el-button>
        <el-button type="danger" size="mini"> 冻结账户</el-button>
    </ly-panel-header>
    <ly-panel-content>
        <ly-form-view vertical bold>
            <ly-form-line>
                <ly-info label="未付款">0</ly-info>
                <ly-info label="付款日期">2019-11-09</ly-info>
            </ly-form-line>
            <ly-form-line>
                <ly-info label="未付款">0</ly-info>
                <ly-info label="付款日期">2019-11-09</ly-info>
            </ly-form-line>
            <ly-form-line>
                <ly-info label="未付款">0</ly-info>
                <ly-info label="付款日期">2019-11-09</ly-info>
            </ly-form-line>
        </ly-form-view>
    </ly-panel-content>
</ly-panel>
                        </pre>
                </ly-code-view>
            <el-divider content-position="left">右面面板-3-代码</el-divider>
            <ly-code-view>
                    <pre v-pre>
<ly-panel>
    <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first"></el-tab-pane>
        <el-tab-pane label="配置管理" name="second"></el-tab-pane>
        <el-tab-pane label="角色管理" name="third"></el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
    </el-tabs>
    <ly-panel-content>
        <ly-form-view>
            <ly-info label="未付款">0</ly-info>
            <ly-info label="付款日期">2019-11-09</ly-info>
            <ly-info label="未付款">0</ly-info>
            <ly-info label="付款日期">2019-11-09</ly-info>
        </ly-form-view>
    </ly-panel-content>
</ly-panel>
                        </pre>
            </ly-code-view>

        </ly-page-content>
    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    activeName:'first',
                    form: {
                        step: 1,
                        num: 1,
                        select_multiple: [],
                        checkList: [],
                        color: '#FE707D'
                    },
                    rules: {
                        name: {
                            required: true,
                            message: '请输入活动名称',
                            trigger: 'blur'
                        },
                        desc: {
                            required: true,
                            message: '请输入活动名称',
                            trigger: 'blur'
                        }


                    }
                }
            },
            mounted: function () {

            },
            methods: {}
        }
    })
</script>